<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title data-i18n="resources.title_cartoCSSLine"></title>
    <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
    <script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<div id="map"></div>
<script type="text" id="textData">
        @color:#111;
        #Railway_A___Road{
        line-color:@color;
        line-width:2;
        }
        #Railway_A___Road::one{
        line-dasharray:15,15;
        line-color:#DDDDDD;
        line-width:1.5;
        }
</script>
<script>
    var map, layer, cartoCss,
        host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-china400/rest/maps/China";
    init();

    function init() {
        if (!document.createElement('canvas').getContext) {
            widgets.alert.showAlert(resources.msg_supportCanvas, false);
            return;
        }

        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.MousePosition(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })]
        });
        cartoCss = document.getElementById("textData").text;
        layer = new SuperMap.Layer.TiledVectorLayer("China", url, {
            cacheEnabled: true,
            returnAttributes: true
        }, {useLocalStorage: true, cartoCss: cartoCss, donotNeedServerCartoCss: true});
        layer.events.on({"layerInitialized": addLayer});
    }

    function addLayer() {
        map.addLayers([layer]);
        var center = new SuperMap.LonLat(12957388, 4853991);
        map.setCenter(center, 11);
    }

</script>
</body>
</html>